<script setup lang="ts">
import iphonese from './imgs/iphonese.jpg'
import iphone11 from './imgs/iphone11.jpg'
import ipadpro from './imgs/ipadpro.jpg'
import airpodspro from './imgs/airpodspro.jpg'
import macbookpro from './imgs/macbookpro.jpg'
import wwdc20 from './imgs/wwdc20.jpg'
import watch from './imgs/watch.jpg'
import GoodBriefInfo from './components/GoodBriefInfo.vue'
</script>

<template>
  <div class="homecontainer _homecontainer">
    <GoodBriefInfo :good-name="'iPhone SE'" :background-color="'rgb(19, 18, 25)'" :good-info="'称心称手,超值入手'"
      :img-src="iphonese" :font-color="'white'">
    </GoodBriefInfo>

    <GoodBriefInfo :good-name="'iPhone11'" :background-color="'rgb(250, 250, 250)'" :good-info="'一切都刚刚好'"
      :img-src="iphone11" :font-color="'black'">
    </GoodBriefInfo>

    <GoodBriefInfo :good-name="'iPad Pro'" :background-color="'rgb(250, 250, 250)'" :good-info="'你的下一台电脑，未必是电脑'"
      :img-src="ipadpro" :font-color="'black'">
    </GoodBriefInfo>

    <div class="subdiv _subdiv">
      <div class="left">
        <GoodBriefInfo :good-name="'这一刻属于你'" :background-color="'rgb(250, 250, 250)'" :good-info="'让你的AirPods更显个性，免费镌刻服务，Apple独家福利'"
          :img-src="airpodspro" :font-color="'black'">
        </GoodBriefInfo>
      </div>
      <div class="right">
        <GoodBriefInfo :good-name="'MacBook Pro'" :background-color="'rgb(19, 18, 25)'" :good-info="'动力，行动力'"
          :img-src="macbookpro" :font-color="'white'">
        </GoodBriefInfo>
      </div>
    </div>
    <div class="subdiv _subdiv">
      <div class="left">
        <GoodBriefInfo :good-name="'WWDC20'" :background-color="'rgb(0, 0, 0)'" :good-info="'来看看我们发布会的所有精彩内容'"
          :img-src="wwdc20" :font-color="'white'">
        </GoodBriefInfo>
      </div>
      <div class="right">
        <GoodBriefInfo :good-name="'Apple Watch'" :background-color="'rgb(251, 251, 253)'" :good-info="'时尚，表达'"
          :img-src="watch" :font-color="'black'">
        </GoodBriefInfo>
      </div>
    </div>

  </div>
</template>

<style scoped lang="less">
// 大于800px
@media only screen and (min-width: 800px) {
  .homecontainer {
    font-size: 1em;

    .subdiv {
      width: 100%;
      display: flex;
      justify-content: space-around;
      font-size: .5em;

      .left {
        width: 48%;
        height: 100%;
        font-size: .8em;
      }

      .right {
        width: 48%;
        height: 100%;
        font-size: .8em;
      }
    }
  }
}

// 小于800px
@media only screen and (max-width: 799px) {
  ._homecontainer {
    font-size: 1vw;

    ._subdiv {
      width: 100%;
      display: flex;
      flex-direction: column;
      // justify-content: space-around;
      font-size: .5em;

      .left {
        width: 100%;
        height: 100%;
        font-size: .8em;
      }

      .right {
        width: 100%;
        height: 100%;
        font-size: .8em;
      }
    }
  }
}
</style>
